<template>
  <el-menu
    class="menu"
    :default-active="activeMenu"
    mode="horizontal"
    @select="handleMenuSelect"
  >
    <el-menu-item index="front-end">前端</el-menu-item>
    <el-menu-item index="java">Java</el-menu-item>
    <el-menu-item index="python">Python</el-menu-item>
    <el-menu-item index="mini-program">小程序</el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// const activeMenu: string = (route.query.category as string) || ''
const activeMenu = ref<string>('')

// 监听router.queery.category 实时更新activeMenu
watch(
  () => route.query.category,
  (newVal) => {
    activeMenu.value = newVal as string
  }
)

const handleMenuSelect = (index: string) => {
  router.push({ path: '/', query: { category: index } })
}
</script>

<style scoped>
.menu {
  height: 55px;
  background-color: #fff;
  margin-left: 20px;
  border-bottom: none;
}

.el-menu--horizontal.el-menu {
  border-bottom: none;
}
</style>
